<template>
  <transition name="bounce">
    <div class="mui-content pd">
      <mh-header headName="充值"> </mh-header>
      <div class="account-balance">
        <p class="cur-balance mh-pd-lr">当前余额：￥{{total}}</p>
        <p class="choose-val mh-pd-lr">选择充值金额</p>
        <ul class="quick-list mh-pd-lr flex">
          <li class="quick-charge mui-text-center"
              :class="{active: activeType === item.type}"
              v-for="(item,index) in quickCharge"
              :key="'pay'+index"
              @tap="chooseAmount(item.type, index)"
          >
            <a href="javascript:" v-text="`￥${item.value}`">￥-</a>
          </li>
        </ul>
        <p class="mh-pd-lr">支付金额: <span class="price">￥{{price}}</span></p>
      </div>

      <div class="choose-payment">
        <p class="mh-pd">请选择支付账户</p>
        <ul>
          <li class="payment mh-pd-lr" :class="{active: activePay === 1}" @tap="choosePayment(1)">
            <a href="javascript:">
              <img src="../../../assets/images/ico/ic_alipay.png" alt="支付宝">
              <span>支付宝</span>
            </a>
          </li>
          <li class="payment mh-pd-lr" :class="{active: activePay === 2}" @tap="choosePayment(2)">
            <a href="javascript:">
              <img src="../../../assets/images/ico/ic_wechat.png" alt="微信支付">
              <span>微信</span>
            </a>
          </li>
        </ul>
      </div>

      <div class="btn-row">
        <button type="button" class="mui-btn-block mh-btn btn-pay">确定支付</button>
      </div>
    </div>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "pay",
    data () {
      return {
        total: '0.00',
        price: 10,
        activeType: 1,
        activePay: 1,
        quickCharge: [
          {
            type: 1,
            value: 10
          },
          {
            type: 2,
            value: 20
          },
          {
            type: 3,
            value: 50
          },
          {
            type: 4,
            value: 100
          },
          {
            type: 5,
            value: 200
          }
        ]
      }
    },
    methods: {
      chooseAmount (t, index) {
        this.activeType = t;
        this.price = this.quickCharge[index].value;
      },
      choosePayment (i) {
        this.activePay = i;
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  html,body,.mh-app {background: #f2f2f2;}
  .total-pay {
    padding: 2rem 0;
    background: #fff;
    margin-bottom: 1rem;
  }
  .t-price {
    font-size: 3rem;
    color: #333;
  }
  .label-price {
    font-size: 1.3rem;
    color: #333;
  }
  .sub-tit {
    font-size: 1.5rem;
    color: #333;
  }
  .account-balance {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    background: #fff;
  }
  .cur-balance {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eeeeee;
    color: #333;
    font-size: 1.4rem;
  }
  .choose-val {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
  .quick-list {flex-flow:row wrap;}
  .quick-charge {
    display: inline-block;
    width: 31%;
    margin-right: 2.33%;
    margin-bottom: .5rem;
    font-size: 2.4rem;
    padding: 2rem 0;
    border: 1px solid #999;
    &.active{
      border: 1px solid #f26c60;
      a {color: #f26c60;}
    }
    a {color: #999;}
  }
  .choose-payment {
    background: #fff;
    &>p {border-bottom: 1px solid #eee;}
  }
  .payment {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
    background: url("../../../assets/images/ico/ic_vo_uncheck.png") no-repeat 95% center;
    background-size: 2.5rem 2.5rem;
    &.active {
      background: url("../../../assets/images/ico/ic_vo_check.png") no-repeat 95% center;
      background-size: 2.5rem 2.5rem;
    }
    img {width: 4rem;}
  }
  .btn-row {
    padding: 3.5rem 1.5rem;
    background: #fff;
    .btn-pay {background: #f26c60;}
  }
</style>
